<template>
  <div class="container" :style="containerStyle">
    <header class="header">
      <div class="bg">
        <img :src="headSrc" alt="" />
      </div>
      <span class="logo">
        <a href="https://gitee.com/xxxxxxd" target="_blank" :style="containerStyle">W e l c o m e - y o u !</a>
      </span>
      <span class="title">数据可视化-后台监控系统</span>
      <div class="title-right">
        <span class="theme">切换主题</span>
        <img :src="themeSrc" alt="" title="切换主题" class="qiehuan" @click="handleChangeTheme"/>
        <span class="nowtime"> {{ systemDateTime }}</span>
      </div>
    </header>
    <div class="view">
      <div class="left">
        <!-- 判断是否是全屏状态 -->
        <div id="left-top" :class="[fullScreenStatus.trend ? 'fullscreen' : '']">
          <Trend ref="trend"></Trend>
          <div class="resize">
            <!-- 缩小图标icon-compress-alt  放大图标icon-expand-alt -->
            <span @click="changeSize('trend')" :class="['iconfont', fullScreenStatus.trend ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
          </div>
        </div>
        <div id="left-bottom" :class="[fullScreenStatus.seller ? 'fullscreen' : '']">
          <Seller ref="seller"></Seller>
          <div class="resize">
            <span @click="changeSize('seller')" :class="['iconfont',fullScreenStatus.seller ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
          </div>
        </div>
      </div>
      <div class="center">
        <div id="center-top" :class="[fullScreenStatus.map ? 'fullscreen' : '']">
          <Map ref="map"></Map>
          <div class="resize">
            <span @click="changeSize('map')" :class="['iconfont',fullScreenStatus.map ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
          </div>
        </div>
        <div id="center-bottom" :class="[fullScreenStatus.rank ? 'fullscreen' : '']">
          <Rank ref="rank"></Rank>
          <div class="resize">
            <span @click="changeSize('rank')" :class="['iconfont',fullScreenStatus.rank ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
          </div>
        </div>
      </div>
      <div class="right">
        <div id="right-top" :class="[fullScreenStatus.hot ? 'fullscreen' : '']">
          <Hot ref="hot"></Hot>
          <div class="resize">
            <span @click="changeSize('hot')" :class="['iconfont',fullScreenStatus.hot ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
          </div>
        </div>
        <div id="right-bottom" :class="[fullScreenStatus.stock ? 'fullscreen' : '']">
          <Stock ref="stock"></Stock>
          <div class="resize">
            <span @click="changeSize('stock')" :class="['iconfont',fullScreenStatus.stock ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
          </div>
        </div>
      </div>
      <div class="addContent" :style="containerStyle2">
        <p class="bottomTime">{{ systemDateTime }}</p>
        <p class='joke'>
          {{ joke }}--
          <span @click='getJoke' id='renovate' class='iconfont icon-exchangerate'></span>
        </p>
      </div>
      <div class="distance">&nbsp;</div>
    </div>
  </div>
</template>
<script>
import Trend from "@/components/Trend";
import Seller from "@/components/Seller";
import Map from "@/components/Map";
import Rank from "@/components/Rank";
import Hot from "@/components/Hot";
import Stock from "@/components/Stock";
import { mapState } from "vuex";
import { getThemeValue } from "@/utils/theme.js";
import axios from 'axios'
export default {
  components: {
    Trend,
    Seller,
    Map,
    Rank,
    Hot,
    Stock
  },
  data() {
    return {
      // 定义每一个图表的全屏状态的数据
      fullScreenStatus: {
        trend: false,
        seller: false,
        map: false,
        rank: false,
        hot: false,
        stock: false
      },
      systemDateTime: null,
      timerId: null,
      joke: null,
      timerId2: null,
    };
  },
  created() {
    this.nowTime();
    this.getJoke();
    this.renovate();
  },
  destroyed() {
    clearInterval(this.timerId);
    clearInterval(this.timerId2);
  },
  computed: {
    headSrc() {
      return getThemeValue(this.theme).headerBorderSrc;
    },
    themeSrc() {
      return getThemeValue(this.theme).themeSrc;
    },
    containerStyle() {
      return {
        backgroundColor: getThemeValue(this.theme).backgroundColor,
        color: getThemeValue(this.theme).titleColor
      };
    },
    containerStyle2() {
      return {
        backgroundColor: getThemeValue(this.theme).backgroundColor2,
        color: getThemeValue(this.theme).titleColor
      };
    },
    ...mapState(["theme"])
  },
  methods: {
    getJoke(){
      axios.get('https://autumnfish.cn/api/joke')
      .then(res => {
        this.joke = res.data;
      })
      .catch(err => {
        // console.log(err);
      });
    },
    renovate(){
      this.timerId2 = setInterval(() => {
        this.getJoke()
      }, 10000)
    },
    changeSize(chartName) {
      // 1.改变fullScreenStatus的数据
      this.fullScreenStatus[chartName] = !this.fullScreenStatus[chartName];
      // 2.需要调用每一个图表组件的screenAdapter的方法
      // this.$refs[chartName].screenAdapter()
      this.$nextTick(() => {
        this.$refs[chartName].screenAdapter();
      });
    },
    handleChangeTheme() {
      this.$store.commit("changeTheme");
    },
    nowTime() {
      this.systemDateTime = new Date().toLocaleString();
      this.timerID = setInterval(() => {
        this.systemDateTime = new Date().toLocaleString();
        // document.querySelector(".nowtime").innerHTML = `${dt}`
        // let dt = new Date();
        // let y = dt.getFullYear();
        // let M = dt.getMonth() + 1;
        // let d = dt.getDate();
        // let h = dt.getHours();
        // h = h < 10 ? "0" + h : h;
        // let m = dt.getMinutes();
        // m = m < 10 ? "0" + m : m;
        // let s = dt.getSeconds();
        // s = s < 10 ? "0" + s : s;
        // let text = "";
        // if (h < 12) {
        //   text = "上午好";
        // } else if (h < 18) {
        //   text = "下午好";
        // } else {
        //   text = "晚上好";
        // }
        // document.querySelector(".nowtime").innerHTML = `
        //   ${y + "/" + M + "/" + d + " " + text + " " + h + ":" + m + ":" + s}
        // `;
      }, 1000);
    }
  }
};
</script>
<style scoped>
/* 全屏样式的定义 */
.fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  z-index: 100;
}
.container {
  width: 100%;
  height: 100vh;
  padding: 0 20px;
  box-sizing: border-box;
}
.header {
  width: 100%;
  height: 3.7rem;
  position: relative;
}
.bg img {
  width: 100%;
  height: 3.6rem;
}
.logo a {
  text-decoration: none;
  font-size: 20px;
  letter-spacing: 3px;
  font-weight: bold;
}
@keyframes my {
  0% {
    width: 0;
  }
  100% {
    width: 19.3rem;
  }
}
.logo {
  position: absolute;
  left: 5px;
  top: 8px;
  overflow: hidden;
  white-space: nowrap;
  animation: my 5s steps(13) forwards infinite;
}
.title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: bold;
  font-size: 1.5rem;
}
/* 头部右侧部分 */
.title-right {
  display: flex;
  align-items: center;
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-80%);
}
.qiehuan {
  width: 28px;
  height: 21px;
  cursor: pointer;
}
.theme {
  font-size: 15px;
  margin-right: 10px;
}
.nowtime {
  font-size: 15px;
  margin-left: 10px;
}
/* 六个视图 */
.view {
  width: 100%;
  height: 100%;
  margin-top: 15px;
  display: flex;
}
.addContent,.distance {
  display: none;
}
@media screen and (max-width: 699px) {
  .title,
  .theme,
  .nowtime {
    display: none;
  }
  .logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: Georgia, "Times New Roman", Times, serif;
  }
  .distance{
    display: block;
    margin-top: 0.5rem;
  }
  .addContent {
    display: block;
    border-radius: 20px;
    text-align: center;
    letter-spacing: 5px;
  }
  .bottomTime{
    padding: 1.5rem 1rem 1rem 1rem;
    font-size: 1.4rem;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    font-weight: bold;
  }
  .joke{
    padding: 0 1rem 1rem 1rem;
    font-size: 0.9rem;
    text-align: left;
    line-height: 1.5rem;
  }
  #renovate{
    position: relative;
    top: 2.5px;
  }
  .container {
    overflow-y: scroll;
  }
  .view {
    flex-flow: column;
  }
  .view .left,
  .view .center,
  .view .right {
    display: flex;
    flex-flow: column;
    width: 100%;
    margin-left: 0;
    margin-top: 15px;
  }
  .left #left-top {
    height: 17rem;
  }
  .left #left-bottom,
  .center #center-top,
  .center #center-bottom,
  .right #right-top,
  .right #right-bottom {
    height: 17rem;
    margin-top: 2rem;
  }
  .right #right-bottom {
    margin-bottom: 1.5rem;
  }
}
/* 左侧视图 */
.left {
  height: 100%;
  width: 27.6%;
}
#left-top {
  height: 46%;
  position: relative;
}
#left-bottom {
  height: 38%;
  margin-top: 25px;
  position: relative;
}
/* 中间视图 */
.center {
  height: 100%;
  width: 41.5%;
  margin-left: 1.6%;
}
#center-top {
  height: 56%;
  position: relative;
}
#center-bottom {
  margin-top: 25px;
  height: 28%;
  position: relative;
}
/* 右侧视图 */
.right {
  height: 100%;
  width: 27.6%;
  margin-left: 1.6%;
}
#right-top {
  height: 46%;
  position: relative;
}
#right-bottom {
  height: 38%;
  margin-top: 25px;
  position: relative;
}
.resize {
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
}
</style>
